<template>
    <div>
      <transition name="slide">
        <div v-if="showModal" class="modal">
      <div class="mask"></div>
      <div class="modal-dialog">
        <div class="modal-header">
          <span>{{ title }}</span>
          <div class="tool">
            <a v-if="btnType==1" class="btn btn-primary" href="javascript:;" v-on:click="savedata">{{
              sureText
              }}</a>
            <a v-if="btnType==2" class="btn btn-default" href="javascript:;" v-on:click="cancel">{{
              cancelText
              }}</a>
            <div v-if="btnType==3" class="btn-group" style="display: inline-block">
              <a class="btn btn-primary" href="javascript:;" v-on:click="savedata">{{ sureText }}</a>
              <a class="btn btn-default" href="javascript:;" v-on:click="cancel()">{{ cancelText }}</a>
            </div>
            <div v-if="btnType==4" class="btn-group" style="display: inline-block">
              <a class="btn btn-default" href="javascript:;" v-on:click="tosigin()">{{ siginText }}</a>
              <a class="btn btn-primary" href="javascript:;" v-on:click="savedata">{{ sureText }}</a>
              <a class="btn btn-default" href="javascript:;" v-on:click="cancel()">{{ cancelText }}</a>
            </div>
            <div class="btn-group" style="display: inline-block" v-if="btnType==5">
              <a href="javascript:;" class="btn btn-default" v-on:click="tosigin()">{{ siginText }}</a>
              <a href="javascript:;" class="btn btn-primary" v-on:click="savedata">{{ sureText }}</a>
            </div>
          </div>
        </div>
        <div class="modal-body">
          <div class="container">
            <div class="row">
              <div class="col-24">
                <div class="form-item-title">
                  <span>最高人民检察院</span>
                </div>
              </div>
              <div class="col-24">
                <div class="form-item-title">
                  <span>接 访 记 录</span>
                </div>
              </div>
              <div class="col-24">
                <div class="row">
                  <div class="col-12">
                    <div class="form-item">
                      <label for="kssj" style="width: 120px"> 开始时间:</label>
                      <datetime
                              id="kssj"
                              v-model="form.kssj" :hide-backdrop="true" format="yyyy-MM-dd HH:mm:ss"
                              input-style="width: calc(100% - 120px);box-sizing: border-box;font-size: 20px;font-family: '宋体';line-height:30px;border: none;border-bottom: 2px solid #000000;padding:10px;padding-bottom:0vw"
                              type="datetime" value-zone="Asia/Shanghai"
                              zone="Asia/Shanghai"
                              @input="input({'kssj':form.kssj})"></datetime>
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="form-item">
                      <label for="jssj" style="width: 120px"> 结束时间:</label>
                      <datetime
                              id="jssj"
                              v-model="form.jssj" :hide-backdrop="true" format="yyyy-MM-dd HH:mm:ss"
                              input-style="width: calc(100% - 120px);box-sizing: border-box;font-size: 20px;font-family: '宋体';line-height:30px;border: none;border-bottom: 2px  solid #000000;padding:10px;padding-bottom:0vw"
                              type="datetime" value-zone="Asia/Shanghai"
                              zone="Asia/Shanghai"
                              @input="input({'jssj':form.jssj})"></datetime>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-24">
                <div class="form-item">
                  <label id="jfddlable" for="jfdd" style="width: 80px"> 地址:</label>
                  <input id="jfdd" v-model="form.jfdd"
                         :disabled="isdisabled(form.jfdd)"
                         placeholder="" style="width: calc(100% - 80px)"
                         @input="input({'jfdd':form.jfdd})">
                </div>
              </div>
              <div class="col-12">
                <div class="form-item">
                  <label for="jfr" style="width: 100px"> 接访人:</label>
                  <input id="jfr"
                         ref="jfr"
                         v-model="form.jfr"
                         :disabled="isdisabled(form.jfr)"
                         style="width: calc(100% - 100px)"
                         @input="input({'jfr':form.jfr})">
                </div>
              </div>
              <div class="col-12">
                <div class="form-item">
                  <label for="jlr" style="width: 100px"> 记录人:</label>
                  <input ref="jlr" v-model="form.jlr"
                         :disabled="isdisabled(form.jlr)"
                         name="jlr" style="width: calc(100% - 100px)"
                         @input="input({'jlr':form.jlr})">
                </div>
              </div>
              <div class="col-12">
                <div class="form-item">
                  <label for="xfrxm" style="width: 100px"> 来访人:</label>
                  <input id="xfrxm"
                         ref="xfrxm"
                         v-model="form.xfrxm"
                         :disabled="isdisabled(form.xfrxm)" style="width: calc(100% - 100px)"
                         @input="input({'xfrxm':form.xfrxm})">
                </div>
              </div>
              <div class="col-12">
                <div class="form-item">
                  <label for="xb_dm" style="width: 80px"> 性别:</label>
                  <select id="xb_dm" v-model="form.xb_dm"
                          :disabled="isdisabled(form.xb_dm)" class="select" style="width: calc(100% - 80px)"
                          @change="input({'xb_dm':form.xb_dm})">
                    <option v-for="(item,index) in xmEnum" :key="index" :value="item.value">{{ item.label }}</option>
                  </select>
                </div>
              </div>
              <div class="col-12">
                <div class="form-item">
                  <label for="nl" style="width: 80px"> 年龄:</label>
                  <input id="nl" ref="nl"
                         v-model="form.nl"
                         :disabled="isdisabled(form.nl)"
                         style="width: calc(100% - 80px)"
                         @input="input({'nl':form.nl})">
                </div>
              </div>
              <div class="col-12">
                <div class="form-item">
                  <label for="mz_dm" style="width: 80px"> 民族:</label>
                  <select id="mz_dm" v-model="form.mz_dm"
                          :disabled="isdisabled(form.mz_dm)" class="select" style="width: calc(100% - 80px)"
                          @change="input({'mz_dm':form.mz_dm})">
                    <option v-for="(item,index) in mzenum" :key="index" :value="item.value">{{ item.label }}</option>
                  </select>
                </div>
              </div>
              <div class="col-12">
                <div class="form-item">
                  <label for="zjhm" style="width: 100px"> 身份证:</label>
                  <input id="zjhm"
                         ref="zjhm"
                         v-model="form.zjhm"
                         :disabled="isdisabled(form.zjhm)" style="width: calc(100% - 100px)"
                         @input="input({'zjhm':form.zjhm})">
                </div>
              </div>
              <div class="col-12">
                <div class="form-item">
                  <label for="sjyzk_dm" style="width: 120px"> 文化程度:</label>
                  <select id="sjyzk_dm" v-model="form.sjyzk_dm"
                          :disabled="isdisabled(form.sjyzk_dm)" class="select" style="width: calc(100% - 120px)"
                          @change="input({'sjyzk_dm':form.sjyzk_dm})">
                    <option v-for="(item,index) in xdEnum" :key="index" :value="item.value">{{ item.label }}</option>
                  </select>
                </div>
              </div>
              <div class="col-24">
                <div class="form-item">
                  <label for="lfrgzdw" style="width: 120px"> 工作单位:</label>
                  <input id="lfrgzdw" ref="lfrgzdw"
                         v-model="form.lfrgzdw"
                         :disabled="isdisabled(form.lfrgzdw)"
                         style="width: calc(100% - 120px)"
                         @input="input({'lfrgzdw':form.lfrgzdw})">
                </div>
              </div>
              <div class="col-24">
                <div class="form-item">
                  <label for="sddz" style="width: 120px"> 现住地址:</label>
                  <input id="sddz"
                         ref="sddz"
                         v-model="form.sddz"
                         :disabled="isdisabled(form.sddz)"
                         style="width: calc(100% - 120px)"
                         @input="input({'sddz':form.sddz})">
                </div>
              </div>
              <div class="col-24">
                <div class="form-item">
                  <label for="lxff" style="width: 120px"> 联系方式:</label>
                  <input id="lxff"
                         ref="lxff"
                         v-model="form.lxff"
                         :disabled="isdisabled(form.lxff)"
                         style="width: calc(100% - 120px)"
                         @input="input({'lxff':form.lxff})">
                </div>
              </div>
              <div class="col-24">
                <div class="form-item">
                  <div class="box">
                    <label for="grjl" style="width: 120px"> 个人简历:</label>
                    <textarea id="grjl"
                              ref="grjl"
                              v-model="form.grjl"
                              :disabled="isdisabled(form.grjl)" style="width: calc(100% - 120px)"
                              wrap="physical"
                              @input="input({'grjl':form.grjl})"></textarea>
                  </div>
                </div>
              </div>
              <div class="col-24">
                <div class="form-item">
                  <div class="box">
                    <label for="jtcygk" style="width: 160px">家庭成员概况:</label>
                    <textarea id="jtcygk"
                              ref="jtcygk"
                              v-model="form.jtcygk"
                              :disabled="isdisabled(form.jtcygk)"
                              style="width: calc(100% - 160px)"
                              wrap="physical"
                              @input="input({'jtcygk':form.jtcygk})"></textarea>
                  </div>
                </div>
              </div>
              <div class="col-24">
                <div class="form-item">
                  <div class="box">
                    <label for="aqzy" style="width: 120px"> 来访事由:</label>
                    <textarea ref="aqzy" v-model="form.aqzy" :disabled="isdisabled(form.aqzy)"
                              name="aqzy"
                              style="width: calc(100% - 120px)"
                              wrap="physical"
                              @change="textarea($event,'22')"
                              @input="input({'aqzy':form.aqzy})"></textarea>
                  </div>
                </div>

              </div>
              <div class="col-24">
                <div class="row">
                  <div class="col-24">
                    <div class="form-item">
                      <label> 内容:</label>
                    </div>
                  </div>
                  <div v-for="(item,index) in form.nr" :key="index">
                    <div class="col-24">
                      <div class="form-item">
                        <div class="box">

                          <label :for="'w'+index" class="deletelable" style="width: 60px"><span class="del-icon "
                                                                                                @click="delnr({'index':index,'del':true,'w':form.nr[index]})"></span>问:</label>
                          <textarea :id="'w'+index"
                                    :ref="'w'+index"
                                    v-model="item.w"
                                    :disabled="isdisabled(form.nr[index].w)"
                                    style="width: calc(100% - 60px)"
                                    wrap="physical"
                                    @input="input({'w':item.w,'index':index})"></textarea>

                        </div>
                      </div>
                    </div>
                    <div class="col-24">
                      <div class="form-item">
                        <div class="box">
                          <label :for="'d'+index" class="deletelable" style="width: 60px"><span class="del-icon "
                                                                                                @click="delnr({'index':index,'del':true,'d':form.nr[index]})"></span>答:</label>
                          <textarea :id="'d'+index"
                                    :ref="'d'+index"
                                    v-model="item.d" :disabled="isdisabled(form.nr[index].d)"
                                    style="width: calc(100% - 60px)"
                                    wrap="physical"
                                    @input="input({'d':item.d,'index':index})"></textarea>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-2">
                    <div class="form-item">
                      <a class="btn btn-primary" @click="addapplyer"><span class="iconfont">&#xe622;</span></a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-24">
                <div class="row">
                  <div class="col-12">
                    &nbsp;
                  </div>
                  <div class="col-12">
                    <div class="img-qm">
                      <label style="line-height: 40px;padding: 0px;margin: 0px">
                        签名:
                      </label>
                      <img v-if="form.qm" :src="form.qm" style="height:60px; width:200px"/>
                      <VueSignaturePad v-else-if="allowsign"
                                       id="signaturePadModel"
                                       ref="signaturePadModel" :options="SignaturePadoption"
                                       height="60px"
                                       style="float:left;padding: 0px"
                                       width="200px"
                                       @click.native="sigin()"
                      />
                      <div v-else style="float:left;height:60px; width:200px;">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      </transition>
    <div>
      <a class="iconfont tool_bth " @click="$emit('open')">&#xe609; 编辑</a>
    </div>
    </div>
</template>
<script>
  import {Datetime} from 'vue-datetime'
  import 'vue-datetime/dist/vue-datetime.css'
  import {mzenum, xdenum, xbenum} from '../assets/enum'
  import {VueSignaturePad }  from "vue-signature-pad";

  export default {
    name: 'XfRecordModel',
    components: {
      Datetime,
      VueSignaturePad
    },
    props: {
      btnType: {
        type: String,
        default: '4'
      },
      sureText: {
        type: String,
        default: '保存'
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      siginText: {
        type: String,
        default: '重新签名'
      },
      showModal: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: ''
      },
      formkey: {
        type: String,
        default: '',
      },
      wsurl: {
        type: String,
        default: "",
      },
      formdata: {
        type: Object,
        default: () => {
          return {
            "kssj": "",
            "jssj": "",
            "jfdd": "                                                                                                                                                                                                        ",
            "jfr": "                                                                                                                                                                                                         ",
            "xb_dm": "                                                                                                                                                                                                       ",
            "nl": "                                                                                                                                                                                                          ",
            "mz_dm": "                                                                                                                                                                                                       ",
            "notetaker": "                                                                                                                                                                                                   ",
            "jlr": "                                                                                                                                                                                                         ",
            "xfrxm": "                                                                                                                                                                                                       ",
            "zjhm": "                                                                                                                                                                                                        ",
            "lfrgzdw": "                                                                                                                                                                                                     ",
            "sjyzk_dm": "                                                                                                                                                                                                    ",
            "sddz": "                                                                                                                                                                                                        ",
            "lxff": "                                                                                                                                                                                                        ",
            "grjl": "                                                                                                                                                                                                        ",
            "jtcygk": "                                                                                                                                                                                                      ",
            "aqzy": "                                                                                                                                                                                                        ",
            "qm": "",
            "nr": [],
          }
        }
      },
    },
    created() {
    },
    mounted() {
      window.addEventListener('resize', () => {
        this.resize();
      }, false)
    },
    computed: {
      newform() {
        return JSON.parse(JSON.stringify(this.form))
      },
    },
    data() {
      return {
        form: {
          "id": "",
          "kssj": "",
          "jssj": "",
          "jfdd": "",
          "jfr": "",
          "xb_dm": "",
          "nl": "",
          "mz_dm": "",
          "notetaker": "",
          "jlr": "",
          "xfrxm": "",
          "zjhm": "",
          "lfrgzdw": "",
          "sjyzk_dm": "",
          "sddz": "",
          "lxff": "",
          "grjl": "",
          "jtcygk": "",
          "aqzy": "",
          "qm": "",
          "nr": []
        },
        defaultform: {
          "kssj": "",
          "jssj": "",
          "jfdd": "                                                                                                                                                                                                                                                     ",
          "jfr": "                                                                                                                                                                                                         ",
          "xb_dm": "                                                                                                                                                                                                       ",
          "nl": "                                                                                                                                                                                                                                                       ",
          "mz_dm": "                                                                                                                                                                                                       ",
          "notetaker": "                                                                                                                                                                                                   ",
          "jlr": "                                                                                                                                                                                                         ",
          "xfrxm": "                                                                                                                                                                                                       ",
          "zjhm": "                                                                                                                                                                                                                                                     ",
          "lfrgzdw": "                                                                                                                                                                                                                                                  ",
          "sjyzk_dm": "                                                                                                                                                                                                    ",
          "sddz": "                                                                                                                                                                                                                                                     ",
          "lxff": "                                                                                                                                                                                                                                                     ",
          "grjl": "                                                                                                                                                                                                        ",
          "jtcygk": "                                                                                                                                                                                                      ",
          "aqzy": "                                                                                                                                                                                                        ",
          "qm": "",
          "nr": [],
        },
        websockerid: "",
        timeout: '',
        GET_MESSAGE: {
          "type": "1",
          "desc": "获取信息"
        },
        UPD_MESSAGE: {
          "type": "2",
          "desc": "更新信息"
        },
        socket: '',
        mouse: "|",
        empty: " ",
        mzenum: mzenum,
        xmEnum: xbenum,
        xdEnum: xdenum,
        SignaturePadoption: {
          penColor: "#000000",//签名颜色
        },
        allowsign: true,//是否允许签名
      };
    },
    methods: {
      isdisabled(item) {
        return item != undefined && item.indexOf(this.mouse) != -1;
      },
      s4() {
        return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
      },

      resize() {
        this.$nextTick(() => {
          var elementsByTagName = document.querySelectorAll(".modal textarea");
          for (let i = 0; i < elementsByTagName.length; i++) {
            this.textarea({"target": elementsByTagName[i]}, 1)
          }
        });
      },
      sendMessage(type, content) {
        if (this.socket.readyState == 1) {
          this.socket.send(JSON.stringify({type: type, content: content}))
        }
      },
      cancel() {
        this.$emit('cancel');
        if (this.socket != '') {
          this.socket.close()
          this.socket = "";
        }
      },
      createUUID() {
        return this.s4() + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' + this.s4() + this.s4() + this.s4();
      },
      dateFormat(fmt, date) {
        let ret
        const opt = {
          'y+': date.getFullYear().toString(), // 年
          'M+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 时
          'm+': date.getMinutes().toString(), // 分
          's+': date.getSeconds().toString(), // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(
                    ret[1],
                    ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
            )
          }
        }
        return fmt
      },
      initwebsocker() {
        this.websockerid = this.createUUID();
        this.socket = new WebSocket(this.wsurl + "/" + this.formkey + "/" + this.websockerid);
        this.socket.onopen = () => {
          console.log("连接成功!");
        }
        if (this.form.kssj == "") {
          this.form.kssj = this.dateFormat('yyyy-MM-ddTHH:mm:ss', new Date())
        }

        if (this.form.jssj == "") {
          this.form.jssj = this.dateFormat('yyyy-MM-ddTHH:mm:ss', new Date())
        }
        this.socket.onmessage = ($event) => {
          this.$nextTick(() => {
            let data = JSON.parse($event.data);
            if (data["type"] == this.GET_MESSAGE.type) {
              if (data["content"] == "") {
                if (data["to"] != this.websockerid) {//不是给自己的消息
                  data["content"] = this.form;
                  this.socket.send(JSON.stringify(data))//发送自己的最新消息
                } else {//是给自己的消息
                  this.form = this.formdata;
                  let subkeys = Object.keys(this.defaultform)

                  for (let i = 0; i < subkeys.length; i++) {
                    if (this.form[subkeys[i]] == undefined || this.form[subkeys[i]].trim() == '') {
                      this.form[subkeys[i]] = this.defaultform[subkeys[i]];
                    } else if(subkeys[i]!="nr"){
                      this.form[subkeys[i]] = this.form[subkeys[i]] + this.defaultform[subkeys[i]];
                    }
                  }
                  if (this.form["kssj"] == "" ||this.form["kssj"] == undefined) {
                    this.form["kssj"] = this.dateFormat('yyyy-MM-ddTHH:mm:ss', new Date());
                  }
                  if (this.form["jssj"] == "" || this.form["jssj"] == undefined) {
                    this.form["jssj"] = this.dateFormat('yyyy-MM-ddTHH:mm:ss', new Date());
                  }
                }
              } else {
                Object.assign(this.form, this.formdata);
                var subkeys = Object.keys(this.defaultform);
                for (let i = 0; i < subkeys.length; i++) {//去除鼠标内容
                  if ((subkeys[i] != "nr" && subkeys[i] != "kssj" && subkeys[i] != "jssj") &&data["content"][subkeys[i]]!=null&& data["content"][subkeys[i]].endsWith(this.mouse)) {
                    data["content"][subkeys[i]] = data["content"][subkeys[i]].substr(0, data["content"][subkeys[i]].length - 1)
                  } else if (subkeys[i] == "nr") {
                    let nr = data["content"][subkeys[i]];
                    for (let j = 0; j < nr.length; j++) {
                      let nrkeys = Object.keys(nr[j]);
                      for (let k = 0; k < nrkeys.length; k++) {
                        if (nr[j][nrkeys[k]].endsWith(this.mouse)) {
                          data["content"][subkeys[i]][j][nrkeys[k]] = data["content"][subkeys[i]][j][nrkeys[k]].substr(0, data["content"][subkeys[i]][j][nrkeys[k]].length - 1)
                        }
                      }
                    }
                  }
                }
                Object.assign(this.form, data["content"])
                if (this.form["kssj"] == "") {
                  this.form["kssj"] = this.dateFormat('yyyy-MM-ddTHH:mm:ss', new Date());
                }
                if (this.form["jssj"] == "") {
                  this.form["jssj"] = this.dateFormat('yyyy-MM-ddTHH:mm:ss', new Date());
                }
                this.$forceUpdate();
              }
            } else if (data["type"] == this.UPD_MESSAGE.type) {
              data = data["content"];
              var keys = Object.keys(data);
              if (data.index != undefined) {
                var index = data.index;
                if (data.index < this.form.nr.length) {
                  if (keys.indexOf("del") == -1) {
                    for (let i = 0; i < keys.length; i++) {
                      if (keys[i] != "index") {
                        data[keys[i]] = data[keys[i]] + this.mouse;
                      }
                    }
                    Reflect.deleteProperty(data, "index")
                    Object.assign(this.form.nr[index], data);//更新
                    setTimeout(() => {
                      for (let i = 0; i < keys.length; i++) {
                        if (keys[i] != "index") {
                          data[keys[i]] = data[keys[i]].substr(0, data[keys[i]].length - 1);
                        }
                      }
                      Object.assign(this.form.nr[index], data);//更新
                      this.$forceUpdate();
                    }, 600)
                  } else {
                    Reflect.deleteProperty(data, "index")
                    Reflect.deleteProperty(data, "del")
                    this.form.nr.splice(index, 1);
                  }
                  this.$forceUpdate();
                } else {
                  Reflect.deleteProperty(data, "index")
                  Reflect.deleteProperty(data, "add")
                  this.form.nr.push(data);//添加
                  this.$forceUpdate();
                }
              } else {
                for (let i = 0; i < keys.length; i++) {
                  if (keys[i] != "nr" && keys[i] != "kssj" && keys[i] != "jssj") {
                    data[keys[i]] = data[keys[i]] + this.mouse;
                  }
                }
                Object.assign(this.form, data)
                setTimeout(() => {
                  for (let i = 0; i < keys.length; i++) {
                    if (keys[i] != "kssj" && keys[i] != "jssj") {
                      data[keys[i]] = data[keys[i]].substr(0, data[keys[i]].length - 1);
                    }
                  }
                  Object.assign(this.form, data)
                  this.$forceUpdate();
                }, 600)

                this.$forceUpdate();
              }
            }
          })
        }
        this.socket.onclose = () => {
          console.log("连接断开");
        }
        this.socket.onError = () => {
          if (this.socket.readyState == 1) {
            this.socket.close();
          }
          console.log("websocker发生错误");
        }

      },
      /**
       * 文本输入监听事件
       * @param val
       */
      input(val) {
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          if (this.socket.readyState == 1) {
            if (Reflect.has(val, "kssj") || Reflect.has(val, "jssj")) {
              let key = Reflect.has(val, "kssj") ? "kssj" : "jssj";
              if (val[key] != "") {
                this.sendMessage(this.UPD_MESSAGE.type, val);
              }
            } else {
              this.sendMessage(this.UPD_MESSAGE.type, val);
            }
          }
        }, 200)

      },
      /**
       * 重置文本域高度
       * @param e
       * @param id
       */
      textarea(e) {
        this.$nextTick(function () {
          if (e.target != undefined && e.target.tagName == 'TEXTAREA') {
            let textarea = e.target;
            textarea.style.height = '50px';// 1. 让 textarea 的高度恢复默认
            if (textarea.scrollHeight == 0) {
              textarea.style.height = "50px"
            } else {
              textarea.style.height = textarea.scrollHeight + 'px';// 2. textarea.scrollHeight 表示 *textarea* 内容的实际高度
            }
          }
        })
      },
      /**
       * 添加答复
       */
      addapplyer() {
        this.timeout = setTimeout(() => {
          if (this.socket.readyState == 1) {
            let item = {
              "w": "                                                                                                                                                                                                                                                           ",
              "d": "                                                                                                                                                                                                                                                           "
            };
            this.form.nr.push(item)
            let senditem = JSON.parse(JSON.stringify(item))
            senditem["index"] = this.form.nr.length - 1;
            senditem["add"] = true;
            this.sendMessage(this.UPD_MESSAGE.type, senditem);
            this.$forceUpdate();
          }
        }, 200)
      },

      /**
       * 删除答复
       */
      delnr(item) {
        this.timeout = setTimeout(() => {
          this.form.nr.splice(item["index"], 1)
          if (this.form.nr == undefined) {
            this.form.nr = [];
          }
          this.sendMessage(this.UPD_MESSAGE.type, item);
          this.$forceUpdate();
        }, 200)
      },
      /**
       * 签名函数
       */
      tosigin() {
        this.form.qm = "";
        this.allowsign = true
        this.$forceUpdate()
      },
      /**
       * 监听文本框变化
       * @param val
       * @param oldval
       */
      rsizeTextarea(val, oldval) {
        var keys = Object.keys(val);
        for (let i = 0; i < keys.length; i++) {
          if (val[keys[i]] != undefined && keys[i].indexOf("time") == -1 && val[keys[i]] != oldval[keys[i]] && keys[i] != "qm") {
            if (Object.prototype.toString.call(val[keys[i]]) === "[object String]") {//如果是对象
              if (val[keys[i]].indexOf(this.mouse) == -1) {
                this.textarea({target: this.$refs[keys[i]]})
              }
            } else {
              for (let j = 0; j < val[keys[i]].length; j++) {
                let newnew = val[keys[i]][j]
                let newold = (oldval[keys[i]] == undefined || oldval[keys[i]][j] == undefined) ? undefined : oldval[keys[i]][j];
                if (newnew != newold) {
                  let subkeys = Object.keys(newnew);
                  for (let k = 0; k < subkeys.length; k++) {
                    if ((newold == undefined) || (subkeys[k] != "index" && subkeys[k] != "add" && subkeys[k] != "del" && newnew[subkeys[k]].indexOf(this.mouse) == -1 && newnew[subkeys[k]] != newold[subkeys[k]])) {
                      this.$nextTick(function () {
                        if (this.$refs[subkeys[k] + "" + j] != undefined) {
                          this.textarea({target: this.$refs[subkeys[k] + "" + j][0]})
                        }
                      });
                    }
                  }
                }
              }
            }
          }
        }
      },
      /**
       * 签名
       */
      sigin() {
        console.log("进入事件")
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          const {isEmpty, data} = this.$refs.signaturePadModel.saveSignature();
          if (isEmpty) {
            console.log("签名失败!");
          } else {
            this.form.qm = data;
            this.sendMessage(this.UPD_MESSAGE.type, {"qm": this.form.qm});
            this.$forceUpdate();
          }
        }, 6000)
      },
      /**
       * 保存数据
       */
      savedata() {
        let data = {}
        let keys = Object.keys(this.form);
        for (let i = 0; i < keys.length; i++) {
          if (this.form[keys[i]] != undefined) {
            if (Object.prototype.toString.call(this.form[keys[i]]) === "[object String]") {//如果是对象
              data[keys[i]] = this.form[keys[i]].trim();
            } else {
              data[keys[i]] = [];
              for (let j = 0; j < this.form[keys[i]].length; j++) {
                if (this.form[keys[i]][j] != undefined) {
                  let subkeys = Object.keys(this.form[keys[i]][j])
                  for (let k = 0; k < subkeys.length; k++) {
                    data[keys[i]].push(this.form[keys[i]][j][subkeys[k]].trim())
                  }
                }
              }
            }
          }
        }
        this.$emit("savedata", data);
        this.$emit('cancel');
        this.socket.close();
        this.socket = "";
      }
    },
    watch: {
      showModal(val) {
        if (val && this.socket == '') {//如果组件展示
          this.initwebsocker();
          this.resize();//重置文本框大小
        }
      },
      newform: {
        handler(val, oldval) {
          this.rsizeTextarea(val, oldval);
        },
        deep: true
      },
    },

  }
</script>

<style scoped>
  * {
    font-family: "宋体";
  }

  .container {
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
  }

  div {
    display: block;
  }

  .row {
    box-size: border-box;
    width: 100%;
  }

  .row::after, .row::before {
    display: table;
  }

  .row::after {
    clear: both;
  }


  [class*=col-] {
    float: left;
    box-sizing: border-box;
  }

  .col-24 {
    width: 100%;
  }

  .col-12 {
    width: 50%;
  }

  .form-item {
    margin-top: 16px;
    font-size: 1vw;
    /*line-height: 1.5vw;*/
    box-sizing: border-box;
    display: block;
    font-weight: 300;
    position: relative;
  }

  .form-item .box {
    position: relative;


  }

  .deletelable {
    position: relative;
  }

  .deletelable:hover .del-icon {
    display: inline-block;
    position: absolute;
    left: -20px;
    padding: 10px;
    top: 15px
  }


  .img-qm {
    height: 40px;
    font-size: 20px;
    line-height: 20px;
    float: right;
    margin-right: 60px;
    margin-top: 10vw;

  }

  .form-item:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .form-item-title {
    margin-top: 15px;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
  }

  .form-item input {
    overflow-y: hidden;
    line-height: 30px;
    border: none;
    outline: none;
    font-size: 20px;
    text-decoration: underline;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    font-weight: 300 !important;
    padding: 10px;
    box-sizing: border-box;
    padding-right: 0px;
  }

  .form-item textarea {
    overflow-y: hidden;
    line-height: 30px;
    padding: 10px;
    border: none;
    outline: none;
    text-decoration: underline;
    font-size: 20px;
    width: 85%;
    height: 50px;
    resize: none;
    word-break: break-all;
    box-sizing: border-box;
    padding-right: 0px;
  }

  .btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 10px 20px;
    font-size: 0.5vw;
    border-radius: 4px;
  }

  .btn-default:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
    cursor: pointer;
  }

  .btn-default {
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
  }

  .btn-primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }

  .btn-danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
  }

  .btn-danger:hover {
    color: #fff;
    background-color: rgba(245, 108, 108, 0.88);
    border-color: #f56c6c;
    cursor: pointer;
  }

  .btn-primary:hover {
    color: #fff;
    border-color: #c6e2ff;
    background-color: rgba(64, 158, 255, 0.86);
    cursor: pointer;

  }

  .btn-disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
  }

  .btn-group .btn {
    display: inline-block !important;
    margin-right: 1vw;
  }

  .btn-group .btn:last-child {
    margin-right: 0;
  }

  .del-icon {
    display: none;
    width: 14px;
    height: 16px;
    box-sizing: border-box;
    line-height: 1.5vw;
    background: url() no-repeat center;
    background-size: contain;
    cursor: pointer;
  }

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    transition: all .5s;
    min-width: 1500px;
    z-index: 10000;
  }

  .modal .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.5;
  }

  .slide-enter-active {
    top: 0px;
  }

  .slide-leave-active {
    top: -100%;
  }

  .slide-enter {
    top: -100%;
  }

  .modal .modal-dialog {
    position: relative;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 95%;
    background-color: #F5F5F5;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    margin-bottom: 100px;
    bottom: 1vw;
    min-width: 1500px;
  }

  .modal .modal-dialog .modal-header {
    height: 60px;
    background-color: #ffffff;
    padding: 0 1vw;
    line-height: 60px;
    font-size: 16px;
    text-align: center;
    position: relative;
  }

  .modal .modal-dialog .modal-header .tool {
    position: absolute;
    right: 1vw;
    top: 0vw;
  }

  .modal .modal-dialog .modal-body {
    padding: 40px 40px 50px;
    margin: auto;
    height: calc(100% - 140px);
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.31);
    overflow-y: auto;
    padding: 8vw;
    box-sizing: border-box;
    margin: 2vw;
  }

  .modal .modal-dialog .modal-footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 82px;
    line-height: 82px;
    text-align: center;
    background-color: #F5F5F5;
  }

  ::-webkit-scrollbar {
    background: transparent;
    width: 12px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #cecece;
  }

  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
  }

  label {
    font-size: 20px;
    float: left;
    padding: 10px;
    box-sizing: border-box;
    line-height: 30px;
  }

  .modal >>> .vdatetime-popup {
    position: absolute !important;
    transform: translate(0%, 0%) !important;
    left: 100px !important;
    top: 40px !important;
  }

  .select {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    overflow: hidden;
    background-color: #fff;
    border: none;
    padding: 10px;
    border-bottom: 2px solid #000000;
    /*line-height: 1.5vw;*/
    text-shadow: none;
    font-size: 20px;
    transition: box-shadow 0.25s ease;
    z-index: 2;
    outline: none;
    appearance: none !important;
    -moz-appearance: none !important; /* Firefox */
    -webkit-appearance: none !important; /* Safari 和 Chrome */
    padding-bottom: 0px;
    padding-right: 0px;

  }

  .select:hover {
    /*box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);*/
  }

  .select:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    top: 14px;
    right: 10px;
    cursor: pointer;
    z-index: -2;
  }

  .select select {
    cursor: pointer;
    padding: 10px;
    width: 100%;
    padding: 0.5vw;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 1vw;
    /*line-height: 1.5vw;*/
    border: none !important;
    padding: 10px !important;

  }

  .select select:focus {
    outline: none;
    border: none !important;
  }
  .tool_bth {
    color: #296BEF;
    cursor: pointer;
  }

</style>
